<template>
  <div class="lvric-wrap">
    <div>{{ songTxt }}</div>
  </div>
</template>
<script>
import { getLyricByMid } from "@axios/service";
import { mapGetters } from "vuex";
import Lyric from "lyric-parser";
export default {
  props: ["paused"],
  data() {
    return {
      songTxt: "",
    };
  },
  computed: {
    ...mapGetters(["currSong"]),
  },
  methods: {
    async getLyricData() {
      const { mid } = this.currSong;
      const { code, result } = (await getLyricByMid(mid)) || {};
      if (code) return false;
      let lyricStr = result.lyric;
      if (this.lyricObj) {
        this.lyricObj.stop();
        this.lyricObj = null;
      }
      this.lyricObj = new Lyric(lyricStr, (txt) => {
        this.songTxt = txt.txt;
      });
      this.lyricObj.play();
    },
    seek(time) {
      // 控制歌词的跳转
      this.lyricObj.seek(time * 1000);
    },
  },
  watch: {
    paused() {
      if (!this.lyricObj) return false;
      this.lyricObj.togglePlay();
    },
    currSong: {
      immediate: true,
      handler() {
        this.getLyricData();
      },
    },
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.lvric-wrap {
  .wh(300,20);
  .padding(20,0,30,0);
  margin: 0 auto;
  color: @c;
  text-align: center;
  .fs(20);
}
</style>
